$(document).ready(function() {
  function fetchDataAndUpdate(globalName) {
    $.get(`http://127.0.0.1:5000/task5/marketName=${globalName}`, function (data) {    
      var myCharts = echarts.init(document.querySelector('.panel .pie1'));
  
      // 销量和门店平均销量数据键
      var keys = ['max_销量', 'max_门店平均销量', '销量', '门店平均销量'];
      
      // 
      var salesData = data[keys[2]]; // 获取
      var avgSalesData = data[keys[3]]; // 获取“门店平均销量”数据
    
      var option = {
        title: {
          text: '中国地区销量和门店平均销量',
          subtext: '数据来源: 示例数据',
          left: 'center',
          top: '2%',
          textStyle:{
              color: '#5C8FF6'
          },
          subtextStyle:{
              color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            const { name, value } = params;
            const avgSales = avgSalesData.find(d => d.name === name)?.value || '无数据';
            return `
              ${name}<br/>
              销量: ${value}<br/>
              门店平均销量: ${avgSales}
            `;
          }
        },
        visualMap: {
          min: 0,
          max: data[keys[1]], // 根据实际数据调整
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          textStyle: {
            color: '#fff'
          },
          calculable: true,
          inRange: {
            color: ['#a4cffb', '#90c6fd', '#73b7fc', '#63acf6', '#4da5ff'] // 渐变色
          }
        },
        series: [
          {
            name: '销量',
            type: 'map',
            map: 'china',
            roam: true,
            label: {
              show: true,
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(8, 66, 116, 0.2)',
              shadowOffsetX: 1,
              shadowOffsetY: 1,
              borderColor: '#306b9e'
          },
            data: avgSalesData
          }
        ]
      };
    
      // 使用配置项
      myCharts.setOption(option);
    });
  }
  fetchDataAndUpdate(window.globalName)
  $(document).on('globalNameChanged', function(event, globalName) {
    fetchDataAndUpdate(window.globalName)
  })
})